<template>
    <div>
        <input type="file" class="file" ref="file" @change="upload">
        <img :src="pic" alt="" class="avatar" @click="handClick">
    </div>
</template>

<script>
import {uploadpic,operation} from "@/api";
import {axios,baseURL} from "@/utils/axios"
export default {
    props:["userinfo"],
    data(){
        return {
             pic:require("@/assets/images/Pikachu.jpg")
        }
    },
    mounted(){
        if(this.userinfo){
            if(this.userinfo.avatar){
                this.pic = this.userinfo.avatar.replace(/public/,baseURL)
            }else{
                this.pic = require("@/assets/images/Pikachu.jpg")
            }
        }else{
            this.pic = require("@/assets/images/Pikachu.jpg")
        }
    },
    methods:{
        handClick(){
            this.$refs.file.click()
        },
        upload(){
            var file = this.$refs.file.files[0]
            
            var data = new FormData()
            data.append("avatar",file)
            axios({
                url:"/prj/uploadpic",
                method:"POST",
                data:data
            }).then(res=>{
                console.log(res)
                if(res.data.type){
                    this.pic = res.data.avatar.replace(/public/,baseURL)
                    history.go()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .avatar{
        width: 45px;
        height: 45px;
        border-radius:50%;

    }
    .file{
    display: none;
    }
</style>